<template>
    <div>
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container">
                <!-- <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">替换</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">小工具</a></li>
                            <li class="breadcrumb-item active">替换</li>
                        </ol>
                    </div>
                </div> -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container">


                <div class="row">

                    <div class="col-lg-8">
                        <form>

                            <div class="form-group">
                                <label for="paramsTextarea">需要处理的字符串</label>
                                <textarea class="form-control" id="paramsTextarea" rows="5" v-model="paramsText"
                                   placeholder="将字符串s中，A替换为B，s值"></textarea>
                            </div>




                            <form class="form-inline my-inline-form">
                                <div class="form-group mr-4">
                                    <label for="source_str" class="mr-3">查找项</label>
                                    <input type="text" class="form-control" id="source_str" v-model="source_str"
                                        placeholder="A的值">
                                </div>

                                <div class="form-group">
                                    <label for="target_str" class="mr-2">替换项</label>
                                    <input type="text" class="form-control" id="target_str"
                                        v-model="target_str" placeholder="B的值">

                                </div>
                                <button type="button" class="btn btn-default  ml-2" @click="clickReplace">替 换</button>



                                <div class="checkbox ml-1">
                                    <label>
                                        <input type="checkbox" v-model="unescapeVal"> 取消转义
                                    </label>
                                </div>

                            </form>


                            <div id="my_defined_box">
                                <form class="form-inline my-inline-form" v-for="(group, index) in formGroups" :key="index">
                                    <div class="form-group mr-4">
                                        <label for="source_str" class="mr-3">查找项</label>
                                        <input type="text" class="form-control" id="source_str" v-model="group.source_str"
                                            placeholder="A的值" />
                                    </div>
                                    <div class="form-group">
                                        <label for="target_str" class="mr-2">替换项</label>
                                        <input type="text" class="form-control" id="target_str" 
                                            v-model="group.target_str" placeholder="B的值" />
                                    </div>
                                </form>
                            </div>

                            <button type="button" class="btn btn-info btn-sm ml-2" @click="addOneGroup">+</button>

                            <div class="form-group">
                                <label for="curlResTextarea">替换结果</label>
                                <textarea class="form-control" id="curlResTextarea" rows="6" placeholder="{}"
                                    v-model="curlVal"></textarea>
                            </div>

                        </form>
                    </div>

                </div>
                <!-- /.row -->
            </div>

        </div>
    </div>
</template>

<script>
//import { post } from '@/utils/api'

export default {
    name: "replaceIndex",
    data() {
        return {
            // val: '',
            curlVal: "",
            paramsText: '',
            source_str: '',
            target_str: '',
            unescapeVal: true,
            formGroups: [],
        };
    },
    methods: {
        addOneGroup() {
            this.formGroups.push({ source_str: "", target_str: "" });
        },
        basicReplace(source, target) {
            if (this.curlVal && source) {
                const regex = new RegExp(this.escapeRegExp(source), 'g');
                this.curlVal = this.curlVal.replace(regex, target);
                this.curlVal = this.unescapeString(this.curlVal);
            }
        },
        // handleInputBlur() {
        //     // if (this.paramsText && this.source_str && this.target_str) {
        //     //     const regex = new RegExp(this.escapeRegExp(this.source_str), 'g');
        //     //     this.curlVal = this.paramsText.replace(regex, this.target_str);
        //     //     this.curlVal = this.unescapeString(this.curlVal);
        //     //     //this.curlVal = this.curlVal.replace("\\/", '\\\\');
        //     // }
        //     // this.formGroups.forEach((formGroup, index) => {

        //     //     console.log("FormGroup " + (index + 1) + ":");
        //     //     console.log("source_str: " + formGroup.source_str);
        //     //     console.log("target_str: " + formGroup.target_str);
        //     //     this.basicReplace(formGroup.source_str, formGroup.target_str);

        //     // });
        //     this.clickReplace()
        // },
        
        unescapeString(input) {
            // 将输入字符串封装在双引号内，并解析为 JSON 对象以取消转义
            const jsonString = `"` + input + `"`;
            const unescaped = JSON.parse(jsonString);
            return unescaped;
        },
        clickReplace() {
            if (this.paramsText && this.source_str) {
                const regex = new RegExp(this.escapeRegExp(this.source_str), 'g');
                this.curlVal = this.paramsText.replace(regex, this.target_str);
                if (this.unescapeVal) {
                    this.curlVal = this.unescapeString(this.curlVal);
                }
            }
            this.formGroups.forEach((formGroup, index) => {

                console.log("FormGroup " + (index + 1) + ":");
                
                this.basicReplace(formGroup.source_str, formGroup.target_str);

            });
        },
        escapeRegExp(string) {
            return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& 表示整个匹配到的子串
        }

    }
};
</script>

<style scoped>
.my-inline-form {
    margin-top: 30px;
    margin-bottom: 30px;
}
</style>